h3 Form Upload
  small Powerfull upload module

div(ng-controller='FileUploadController', nv-file-drop='', uploader='uploader', filters='queueLimit, customFilter')
  .container-fluid
    .row
      .col-md-3
        .panel
          .panel-body
            h4.page-header.mt0 Select files
            div(ng-show='uploader.isHTML5')
              // 3. nv-file-over uploader="link" over-class="className"
              .box-placeholder.my-drop-zone(nv-file-over='', uploader='uploader',over-class='bg-info') Base drop zone                        
              // Example: nv-file-drop="" uploader="{Object}" options="{Object}" filters="{String}"
              div(nv-file-drop='', uploader='uploader', options="{ url: '/foo' }")
                .box-placeholder.my-drop-zone(nv-file-over='', uploader='uploader', over-class='bg-purple')
                  | Another drop zone with its own settings
            // Example: nv-file-select="" uploader="{Object}" options="{Object}" filters="{String}"
            hr
            input.form-control(filestyle="", type='file', data-button-text="Multiple", data-class-button='btn btn-default', data-class-input="form-control inline", nv-file-select='', uploader='uploader', multiple='')
            br
            input.form-control(filestyle="", type='file', data-button-text="Single", data-class-button='btn btn-default', data-classinput="form-control inline", nv-file-select='', uploader='uploader')
      .col-md-9(style='margin-bottom: 40px')
        .panel
          .panel-body
            p.pull-right.label.label-info(ng-if="uploader.queue.length") Queue length: {{ uploader.queue.length }}
            h4.page-header.mt0 Upload queue
            p.lead.text-center(ng-if="!uploader.queue.length") No files in queue. Start adding some..
            div(ng-if="uploader.queue.length")
              
              table.table(ng-if="uploader.queue.length")
                thead
                  tr
                    th(width='50%') Name
                    th(ng-show='uploader.isHTML5') Size
                    th(ng-show='uploader.isHTML5') Progress
                    th Status
                    th Actions
                tbody
                  tr(ng-repeat='item in uploader.queue')
                    td
                      strong {{ item.file.name }}
                    td(ng-show='uploader.isHTML5', nowrap='') {{ item.file.size/1024/1024|number:2 }} MB
                    td(ng-show='uploader.isHTML5')
                      .progress.progress-xs(style='margin-bottom: 0;')
                        .progress-bar(role='progressbar', ng-style="{ 'width': item.progress + '%' }")
                    td.text-center
                      span(ng-show='item.isSuccess')
                        em.fa.fa-check.fa-fw
                      span(ng-show='item.isCancel')
                        em.fa.fa-ban-circle.fa-fw
                      span(ng-show='item.isError')
                        em.fa.fa-times.fa-fw
                    td(nowrap='')
                      button.btn.btn-info.btn-xs(type='button', ng-click='item.upload()', ng-disabled='item.isReady || item.isUploading || item.isSuccess')
                        span.icon-cloud-upload.mr
                        |  Upload
                      button.btn.btn-warning.btn-xs(type='button', ng-click='item.cancel()', ng-disabled='!item.isUploading')
                        span.icon-close.mr
                        |  Cancel
                      button.btn.btn-danger.btn-xs(type='button', ng-click='item.remove()')
                        span.icon-trash.mr
                        |  Remove
        .panel
          .panel-body
            div
              p Queue progress:
              .progress.progress-xs(style='')
                .progress-bar(role='progressbar', ng-style="{ 'width': uploader.progress + '%' }")
            button.btn.btn-info.btn-s(type='button', ng-click='uploader.uploadAll()', ng-disabled='!uploader.getNotUploadedItems().length')
              span.icon-cloud-upload.mr
              |  Upload all
            button.btn.btn-warning.btn-s(type='button', ng-click='uploader.cancelAll()', ng-disabled='!uploader.isUploading')
              span.icon-close.mr
              |  Cancel all
            button.btn.btn-danger.btn-s(type='button', ng-click='uploader.clearQueue()', ng-disabled='!uploader.queue.length')
              span.icon-trash.mr
              |  Remove all
